<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="5">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div style="display: flex">
              <el-image :src="param.iconUrl" style=" width: 30px;height: 30px;margin:3px;" />
              <div style="flex-grow: 1;margin-left: 13px;">
                <div>
                  <el-popover
                    v-if="param.remark && param.remark!==''"
                    placement="top"
                    width="200"
                    trigger="hover"
                    :content="param.name"
                  >
                    <span slot="reference">{{ param.remark }}</span>
                  </el-popover>
                  <span v-else>{{ param.name }}</span>
                </div>
                <!--                <div style="margin-top: 2px">{{ $t('keyName') }}:{{ param.keyName }}</div>-->
                <div style="margin-top: 2px">{{ formatDate(param.updateDate) }}</div>
              </div>
            </div>
          </div>
          <div style="height: 470px;">
            <el-form
              :model="paramData"
              label-width="80px"
              style="width: 100%;margin-top: 5px"
            >
              <el-form-item label="ID">
                <span>{{ param.paramId }}</span>
              </el-form-item>
              <el-form-item :label="$t('keyName')">
                <span>{{ param.keyName }}</span>
              </el-form-item>
              <el-form-item :label="$t('type')">
                <span>{{ formatterCreatedType(param) }}</span>
              </el-form-item>
              <el-form-item :label="$t('value')">
                <span>{{ param.value }} {{ param.unit }}</span>
              </el-form-item>
              <el-form-item :label="$t('remark')">
                <span>{{ param.remark }}</span>
              </el-form-item>
              <el-form-item :label="$t('hidden')">
                <el-switch
                  v-model="param.hidden"
                  :disabled="true"
                />
              </el-form-item>
              <el-form-item :label="$t('brand')">
                <el-switch
                  v-model="param.brand"
                  :disabled="true"
                />
              </el-form-item>
              <el-form-item :label="$t('tag')">
                <el-tag
                  v-for="tag in paramTagList"
                  :key="tag"
                  class="mr-1"
                  closable
                  @close="deleteTagDeviceParam(tag)"
                >
                  {{ tag.name }}
                </el-tag>
                <el-select v-if="showTagSelect" v-model="tagId" @change="tagSelect">
                  <el-option
                    v-for="item in tagList"
                    :key="item.tagId"
                    :label="item.name"
                    :value="item.tagId"
                  />
                </el-select>
                <el-button v-else type="text" icon="el-icon-plus" @click="showTagSelect = true" />
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card class="box-card" style="height: 623px">
          <el-tabs v-model="activeName">
            <el-tab-pane :label="$t('history')" name="first" style="height: 420px">
              <el-table
                :data="paramVersionList"
                style="width: 100%"
              >
                <el-table-column
                  prop="value"
                  :label="$t('value')"
                />
                <el-table-column
                  :label="$t('time')"
                >
                  <template slot-scope="scope">
                    <i class="el-icon-time" />
                    <span style="margin-left: 13px">{{ formatDate(scope.row.createdDate) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  formatDate, formatterCreatedType,
  successNotice
} from '@/util/common'
import { listTagDeviceParamTagByUser, deleteTagDeviceParam, insertTagDeviceParam } from '@/api/iot/iotTagDeviceParamApi'
import { listTag } from '@/api/iot/iotTagApi'
import { listDeviceParamVersion } from '@/api/iot/iotDeviceParamApi'
export default {
  name: 'DeviceParamInfo',
  components: {

  },
  props: {
    param: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      showTagSelect: false,
      paramData: {},
      tagList: [],
      tagId: null,
      paramTagList: [],
      dataList: [],
      activeName: 'first',
      startDate: null,
      endDate: null,
      paramVersionList: []
    }
  },
  watch: {
    param: {
      deep: true,
      handler(val) {
        if (val != null) {
          this.listData()
        }
      }
    }
  },
  created() {
    this.listTag()
    this.listData()
  }, methods: {
    listDeviceParamVersion() {
      listDeviceParamVersion({
        paramId: this.param.paramId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.paramVersionList = data
        } else {
          this.paramVersionList = []
        }
      })
    },
    formatterCreatedType(item) {
      return formatterCreatedType(this, item.type)
    },
    tagSelect() {
      insertTagDeviceParam({
        tagId: this.tagId,
        paramId: this.param.paramId
      }).then(res => {
        const { code } = res
        if (code === '200') {
          this.listTagDeviceParamTagByUser()
          this.showTagSelect = false
        }
      })
    },
    listTag() {
      listTag({

      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.tagList = data
        } else {
          this.tagList = []
        }
      })
    },
    deleteTagDeviceParam(tag) {
      deleteTagDeviceParam({
        id: tag.id
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        this.listTagDeviceParamTagByUser()
      })
    },
    listTagDeviceParamTagByUser() {
      listTagDeviceParamTagByUser({
        paramId: this.param.paramId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.paramTagList = data
        } else {
          this.paramTagList = []
        }
      })
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    listData() {
      this.listDeviceParamVersion()
      this.listTagDeviceParamTagByUser()
    }
  }
}
</script>


